<template>
    <div class="homeHeader">
        <img src="@/assets/bigScreen/icons/header_bg.png" alt="">
        <div class="page_titles">
            智慧指挥决策中心
        </div>
        <div class="left_page_title">
            <span class="zh">中煤建设集团第三工程处立井施工工程</span>
            <span class="en">ZHONGMEIJIANSHEJITUANDISANGONGCHENGCHULIJINGSHIGONGGONGCHENG</span>
        </div>
        <div class="page_top_right_settings">
            <div class="date_time_weather_box">
                <div class="time">15:04:22</div>
                <div class="line"></div>
                <div class="date">2022-11-25 星期一</div>
                <div class="line"></div>
                <div class="weather">天气： <img src="@/assets/bigScreen/icons/qing.png" alt=""> 多云</div>
            </div>
            <div class="settings_box">
                <div class="alarm_message">
                    <img src="@/assets/bigScreen/icons/msg.png" alt="">告警信息
                </div>
                <div class="user_center" @click="toggleUserMenu">
                    <img src="@/assets/bigScreen/icons/user.png" alt=""><span>个人中心</span>
                    <img src="@/assets/bigScreen/icons/down.png" class="down" alt="">

                    <transition enter-active-class="animate__animated animate__fadeInRight"
                    leave-active-class="animate__animated animate__fadeOutRight" appear>
                        <div class="user-menu" v-if="isUserMenuVisible">
                            <div class="menu-item">个人中心</div>
                            <div class="menu-item">修改密码</div>
                            <div class="menu-item">退出登录</div>
                        </div>
                    </transition>

                </div>
            </div>
        </div>
        <headerMenu />
    </div>
</template>

<script>
import headerMenu from "../components/headerMenu/index.vue";
function adjustScale() {
    const baseWidth = 1920;
    const scale = window.innerWidth / baseWidth;
    document.body.style.transform = `scale(${scale})`;
}
window.addEventListener('resize', adjustScale);
export default {
    components: {
        headerMenu
    },
    data() {
        return {
            isUserMenuVisible: false
        };
    },
    methods: {
        toggleUserMenu() {
            this.isUserMenuVisible = !this.isUserMenuVisible;
        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.homeHeader {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }

    .animate__animated {
        --animate-duration: .5s;
        --animate-delay: 0s;
    }

    .page_titles {
        width: 30%;
        font-size: 2.5vw;
        font-weight: 400;
        letter-spacing: .625vw;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        text-align: center;
        font-family: 'kk';
        position: absolute;
        top: 5%;
        left: 35%;

    }

    .left_page_title {
        width: 25%;
        color: rgba(0, 249, 255, 1);
        position: absolute;
        top: 10%;
        left: .5%;
        font-family: al;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;


        .zh {
            font-size: 1.25vw;
            font-weight: 700;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .en {
            font-size: 0.52vw;
            font-weight: 500;
            letter-spacing: 0.026vw;
            // line-height: 14.48px;
            margin-top: 1%;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }
    }

    .page_top_right_settings {
        width: 30%;
        // height: 100px;
        display: flex;
        justify-content: flex-end;
        position: absolute;
        top: 16%;
        right: .5%;

        .date_time_weather_box {
            width: 50%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            .line {
                width: 0px;
                height: 85%;
                opacity: 1;
                border: 1px solid rgba(19, 82, 128, 1);

            }


            .time {
                font-size: 0.8333vw;
                font-weight: 400;
                color: transparent;
                background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                font-family: 'kk';
            }

            .date {
                font-size: .625vw;
                font-weight: 400;
                color: transparent;
                background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;

            }

            .weather {
                font-size: .625vw;
                font-weight: 400;
                color: transparent;
                background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                display: flex;
                align-items: flex-end;
                justify-content: flex-start;

                img {
                    width: 1.25vw;
                }
            }
        }

        .settings_box {
            width: 40%;
            margin-left: 5%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            font-size: .625vw;
            font-weight: 400;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;

            .alarm_message {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                img {
                    width: 1vw;
                    margin-right: 5%;
                }
            }

            .user_center {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;

                img {
                    width: 1vw;
                }

                span {
                    margin: 0 5%;
                    color: transparent;
                    background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                }

                .down {
                    width: .5vw;

                }



                .user-menu {
                    position: absolute;
                    top: 110%;
                    right: 0;
                    width: 100px;
                    background: rgba(13, 31, 51, 0.85);
                    border: 1px solid rgba(0, 255, 240, 1);
                    border-radius: 4px;
                    z-index: 100;
                    margin-top: 5px;

                    .menu-item {
                        padding: .4167vw .625vw;
                        font-size: .625vw;
                        color: #fff;
                        cursor: pointer;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                        }
                    }
                }
            }

        }
    }
}
</style>